<template>
  <div class="h-fit w-fit">
    <div class="w-h-full relative">
      <div
        class="w-h-full absolute left-0 top-0 z-50"
        v-if="!isShow"
      >
        <el-skeleton
          animated
          class="w-h-full"
        >
          <template #template>
            <el-skeleton-item
              variant="image"
              style="height: 100%; width: 100%"
            ></el-skeleton-item> </template
        ></el-skeleton>
      </div>
      <ElImage
        class="w-h-full absolute left-0 top-0 z-10"
        fit="cover"
        :src="GetFormatImgCosUrl(format, src)"
        @load="isShow = true"
        @error="isShow = false"
      ></ElImage>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { GetFormatImgCosUrl, type CosImgFormatSuffix } from "~/models/cos";

// '' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
defineProps<{ format: CosImgFormatSuffix; src: string }>();
const isDark = useDark();
const isShow = ref(false);
</script>

<style></style>
